<template>
  <div class="TempalteTest">
    <el-input v-model="input" placeholder="请输入内容" @change="getDaa"></el-input>
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
  </div>
</template>

<script>
import axios from '../../utils/axios2'
// const api = 'http://api.map.baidu.com/place/v2/suggestion?query=天安门&region=北京&city_limit=true&output=json&ak=你'

export default {
  name: 'TempalteTest',
  data () {
    return {
      input: '台江区',
      center: { lat: 26.058528, lng: 119.320528 },
      zoom: 3
    }
  },
  created () {
    this.getDaa()
  },
  methods: {
    getDaa () {
      axios
        .get('/place/v2/suggestion', {
          params: {
            query: this.input,
            region: '福州',
            city_limit: 'true',
            output: 'json',
            ak: '5qOlRG5LXn2xbzMOfO8QTVoRplcD522a'
          }
        })
        .then(res => {
          console.log(res)
        })
    },
    handler ({ BMap, map }) {
      console.log(BMap, map)
      // this.center.lng = 116.404
      // this.center.lat = 39.915
      this.zoom = 15
    }
  }
}

/*
  命名规则 vue 文件都是大写开头
  调用使用 -
  api 使用 api后缀
*/
</script>

<style>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>
